<template>
    <div class="body">
        <section class="aboutLogo">
            <img src="../assets/images/normaoLogo.0bf8a786.png" alt="">
        </section>
        <section class="aboutLeft">
            <div class="select">
                <el-select v-model="value" placeholder="请选择" class="aboutSelect">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="mid">
                <div>
                    <p class="switchTitle">关联子项</p>
                </div>
                <div>
                    <el-switch
                            v-model="switchValue"
                            active-color="#13ce66"
                            inactive-color="#ccc">
                    </el-switch>
                </div>
                <div>
                    <p>仅当前项</p>
                </div>
            </div>
            <div class="tree">
                <div class="aboutTreeTop">
                    <div class="aboutTreeTopTitle">
                        <p>监测项</p>
                    </div>
                    <el-tree
                            class="aboutTreeContentTop"
                            :data="data"
                            show-checkbox
                            node-key="id"
                            default-expand-all
                            @node-click="handleTreeNodeClick"
                            :props="defaultProps">
                    </el-tree>
                    <!--        默认-->
                    <!--        :default-expanded-keys="[2, 3]"-->
                    <!--        :default-checked-keys="[5]"-->
                </div>
                <div class="aboutTreeButtom">
                    <div class="aboutTreeButtomTitle">
                        <p>标签</p>
                    </div>
                    <el-tree
                            class="aboutTreeContentBottom"
                            :data="dataBottom"
                            show-checkbox
                            node-key="id"
                            default-expand-all
                            @node-click="handleTreeNodeClick"
                            :props="defaultProps">
                    </el-tree>
                </div>
            </div>
        </section>
        <section class="aboutButtom">
            <div>
                <p>回溯</p>
            </div>
            <div>
                <p>预警</p>
            </div>
            <div>
                <p>
                    监测项
                </p>
            </div>
            <div>
                <p>标签</p>
            </div>
        </section>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //switch开关
                switchValue:true,
                //选择框
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                data: [
                    {
                        id: 1,
                        label: '一级 1',
                        children: [{
                            id: 4,
                            label: '二级 1-1',
                            children: [{
                                id: 9,
                                label: '三级 1-1-1'
                            }, {
                                id: 10,
                                label: '三级 1-1-2'
                            }]
                        }]
                    },
                    {
                        id: 2,
                        label: '一级 2',
                        children: [{
                            id: 5,
                            label: '二级 2-1'
                        }, {
                            id: 6,
                            label: '二级 2-2'
                        }]
                    },
                    {
                        id: 3,
                        label: '一级 3',
                        children: [{
                            id: 7,
                            label: '二级 3-1'
                        }, {
                            id: 8,
                            label: '二级 3-2'
                        }]
                    }],
                dataBottom: [
                    {
                        id: 1,
                        label: '一级 1',
                    },
                    {
                        id: 2,
                        label: '一级 2',
                    },
                    {
                        id: 3,
                        label: '一级 3',
                    },
                    {
                        id: 4,
                        label: '一级 4',
                    },
                    {
                        id: 5,
                        label: '一级 5',
                    },
                    {
                        id: 6,
                        label: '一级 6',
                    }],

                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        methods:{
            handleTreeNodeClick(data){
                console.log(data)
            },
        }

    };
</script>
<style scoped>

    .body{
        position: relative;
        width: 270px;
        height: 100vh;
        background-color: #eee;
    }

    .aboutLogo{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        width: 100%;
        text-align: center;
        background-color: #2c3250;
    }

    .aboutLeft{
        padding: 6px 20px;
        width: 220px;
    }
    .aboutSelect{
        width: 100%;
    }
    .select{
        width: 100%;
    }

    .switchTitle{
        color: #4d2be2;
    }

    .aboutLeft>.mid{
        padding: 10px 0 ;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .tree{
        width: 100%;
        padding: 5px;
        background-color: white;
    }
    .aboutTreeButtom,
    .aboutTreeTop{
        display: flex;
    }
    .aboutTreeButtomTitle,
    .aboutTreeTopTitle{
        width: 50px;
        font-size: 12px;
        padding: 6px 8px 6px 0;
    }

    .aboutButtom{
        justify-content: center;
        position: absolute;
        bottom: 30px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .aboutButtom>div{
        margin: 6px 4px;
        border-radius: 4px;
        width: 33%;
        height: 64px;
        border: 1px solid #ccc;
        line-height: 64px;
    }
</style>